<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <formTitle title="诉求基本信息"/>
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @toLoadMethods="toLoadMethods"
    ></VForm>
    <formTitle title="办理过程信息"/>
    <VForm
      ref="vformComponents2"
      :form="formData2.form"
      :options="formData2.options"
      :rules="formData2.rules"
      :labelWidth="formData2.labelWidth"
      :rowspan="rowspan"
    ></VForm>
    <formTitle title="回访信息"/>
    <VForm
      ref="vformComponents3"
      :form="formData3.form"
      :options="formData3.options"
      :rules="formData3.rules"
      :labelWidth="formData3.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { publicAppealDetail,

    publicAppealAdd } from '@/api/risk/publicAppeal';
  import {
    publicAppealFollowUpdate
     } from '@/api/risk/publicAppealFollow';
  import { treeDataChild} from '@/api/risk/treeData'
  import VForm from "@/components/VForm/index";
  import formTitle from '@/components/FormTitle/formTitle.vue';

  export default {
    components: {
      VForm, formTitle,
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      areaTreeOptions:{}
    },
    watch: {
      'areaTreeOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=> {
            if (t.key == 'areaCode') {
              t.option.data = newVal
            }
          })
          console.log("wstchaa=========this.areaTreeOptions",this.areaTreeOptions)
        },
        deep: true,
        immediate: true
      },

      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
      'typeOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='type'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },


      'bclassifyOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='bclassify'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
          immediate: true
      },
      'classNameOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='className'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'statusOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='status'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'starOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='followStar'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        rowspan:1,
        dict:{},
        formData: {
          form: {
            num:"",
            code:"",
            appealTime:"",
            name:"",
            type:"",
            link:"",
            bclassify: "",
            className:"",
            status:"",
            content:"",
            img:[],
            processMsg:"",
            processUrl:[],
            updateTime:"",
            updateBy:"",
            provinceCode:"",
            cityCode:"",
            countyCode:"",
            areaCode:"",
            follow:{},  //回访数据对象
            followContent:"",
            followName:"",
            followStar:"",
            followTime:"",
            followAppealId:"",
            followId:""
          },
          options: [

            {
              title: "所属区域",
              key: "areaCode",
              type: "gdAreaSelect",
              disabled:true,

            },
            {
              title: "上报时间",
              key: "appealTime",
              type: "date",
              disabled:true,
            },
            {
              title: "诉求人",
              key: "name",
              type: "text",
              disabled:true,
            },
            {
              title: "类型",
              key: "type",
              type: "select",
              multiple:false,

              option: {
                data: this.typeOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
              disabled:true,
            },
            {
              title: "联系方式",
              key: "link",
              type: "text",
              disabled:true,
            },

            {
              title: "状态",
              key: "status",
              type: "select",
              multiple:false,
              option: {
                data: this.statusOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
              disabled:true,
            },

            {
              title: "专题大类",
              key: "bclassify",
              type: "select",
              multiple:false,
              option: {
                data: this.bclassifyOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
              disabled:true,
            },

            {
              title: "专题细类",
              key: "className",
              type: "select",
              multiple:false,
              option: {
                data: this.classNameOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "name", // 指定value对应data的字段
                },
              },
              disabled:true,
            },
            {
              title: "问题内容",
              key: "content",
              type: "textarea",
              disabled:true,
              columnWidth: 'w100max',
            },
            {
              title: "问题图片",
              key: "img",
              type: "file",
              fileType:"image",
              listType:"picture-card",
              uploadTextTip:"",
              disabled:true,
            },
          ],
          rules: {
            num :[
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            code :[
              {max:30, message: '长度最大为30个字符', trigger: 'blur'}
            ],
            appealTime :[
              { required: true, message: '请输入', trigger: 'blur' }
            ],
            name :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:32, message: '长度最大为20个字符', trigger: 'blur'}
            ],
            type :[
              { required: true, message: '请选择', trigger: 'blur' }
            ],
            link :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:20, message: '长度最大为20个字符', trigger: 'blur'}
            ],
            className :[
            ],
            status :[
              { required: true, message: '请选择', trigger: 'blur' }
            ],
            content :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:500, message: '长度最大为500个字符', trigger: 'blur'}
            ],
            img :[
            ],
            processMsg :[
              {max:500, message: '长度最大为500个字符', trigger: 'blur'}
            ],
            processUrl :[
            ],


          },
          labelWidth: "140px",
        },
        formData2:{
          form:{
            processMsg:"",
            processUrl:[],
          },
          options:[
            {
              title: "办理过程情况",
              key: "processMsg",
              type: "textarea",
              disabled:true,
              columnWidth: 'w100max',
            },
            {
              title: "办理过程图片",
              key: "processUrl",
              type: "file",
              fileType:"image",
              listType:"picture-card",
              uploadTextTip:"",
              disabled:true
            },
          ],
          rules: {
            processMsg :[
              {max:500, message: '长度最大为500个字符', trigger: 'blur'}
            ],
            processUrl :[
            ],
          },
          labelWidth: "140px",
        },
        formData3:{
          form:{
            follow:{},  //回访数据对象
            followContent:"",
            followName:"",
            followStar:"",
            followTime:"",
            followAppealId:"",
            followId:""
          },
          options:[
            {
              title: "回访记录",
              key: "followContent",
              type: "textarea",
              columnWidth: 'w100max',

            },
            {
              title: "回访人",
              key: "followName",
              type: "text",

            },
            {
              title: "回访时间",
              key: "followTime",
              type: "datetime",

            },
            {
              title: "用户满意度",
              key: "followStar",
              type: "select",
              multiple:false,
              option: {
                data: this.starOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
          ],
          rules: {
            followContent :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:500, message: '长度最大为500个字符', trigger: 'blur'}
            ],
            followName :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:20, message: '长度最大为20个字符', trigger: 'blur'}
            ],
            followStar :[
              { required: true, message: '请选择', trigger: 'blur' }
            ],
            followTime :[
              { required: true, message: '请选择', trigger: 'blur' }
            ],
          },
          labelWidth: "140px",
        },
        // 字典
        typeOptions:[],
        bclassifyOptions:[],
        classNameOptions:[],
        statusOptions:[],
        starOptions:[],
      };
    },
    methods: {
      toLoadMethods(methods){
        this[methods]();
      },
      changeBclassify(){
        this.formData.form.className='';
        this.classNameOptions=[]
        this.sendBclassifyData();
      },

      async sendBclassifyData() {
        let queryData = {}
        queryData.name = 'hazardBClassify';
        queryData.code = this.formData.form.bclassify;
        let res = await treeDataChild(queryData);
        if (res.code == 200) {
          let that = this
          res.data.forEach(function (item, index) {
            var one = {}
            one.label = item.label;
            one.name = item.code;
            that.classNameOptions.push(one);
          })
        }
      },
      submitFormat(){
        this.formData.form.img = JSON.stringify(this.formData.form.img)
        this.formData2.form.processUrl = JSON.stringify(this.formData2.form.processUrl)
      },
      loadFormat(){
        this.formData.form.img = this.formData.form.img ? JSON.parse(this.formData.form.img).map(item=>{
          return{
            name:item.name,
            url: process.env.VUE_APP_BASE_API + 'file/api/download/'+item.fileId,
            uid: item.uuid,
            fileId: item.fileId,
          }
        }) : []
        this.formData2.form.processUrl = this.formData2.form.processUrl ? JSON.parse(this.formData2.form.processUrl).map(item=>{
          return{
            name:item.name,
            url: process.env.VUE_APP_BASE_API + 'file/api/download/'+item.fileId,
            uid: item.uuid,
            fileId: item.fileId,
          }
        }) : []
      },
      getCheckBoxData(value,option,type){
        if(type=="submit"){
          if(value.length==0){
            return null
          }
          let temp = [];
          value.forEach(t=>{
            let item = option.find(x=> x.label == t)
            if(item!=undefined){
              temp.push(item.value)
            }
          })
          return temp.join(",")
        }else {
          if(!value){
            return []
          }else {
            let data = value.split(",")
            let temp = []
            data.forEach(t=>{
              let item = option.find(x=> x.value == t)
              if(item!=undefined){
                temp.push(item.label)
              }
            })
            return temp
          }
        }
      },
      sure(){
        console.log('sure===',this.formData.form)
        this.$refs.vformComponents3.$refs.form.validate().then(res=>{
          if(this.formData.form.areaCode){
            let temp  = this.formData.form.areaCode
            this.formData.form.provinceCode = temp[0]
            this.formData.form.cityCode = temp[1]
            this.formData.form.countyCode = temp[2]
            this.formData.form.areaCode = temp[2]
          }
          this.submitFormat()
          if(this.openType == "add"){
            this.add()
          }else{
            this.update()
          }
        })
      },
      add(){
        this.formData.form.id = null
        this.formData.form.delFlag=0;

        this.formData3.form.follow.content= this.formData3.form.followContent;
        this.formData3.form.follow.name= this.formData3.form.followName;
        this.formData3.form.follow.star= this.formData3.form.followStar;
        this.formData3.form.follow.followTime= this.formData3.form.followTime;

        let reqdata = {
          ...this.formData.form,
          ...this.formData2.form,
          ...this.formData3.form,
        }
        publicAppealAdd(reqdata).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      update(){
        let updateParam={};
        updateParam.content = this.formData3.form.followContent;


        updateParam.name= this.formData3.form.followName;
        updateParam.star= this.formData3.form.followStar;
        updateParam.followTime= this.formData3.form.followTime;
        updateParam.id =this.formData3.form.follow.id;
        updateParam.appealId =this.formData3.form.follow.appealId;
        console.log(this.formData3.form)
        publicAppealFollowUpdate(updateParam).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      closeSuccess(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$refs.vformComponents2.$refs.form.resetFields();
        this.$refs.vformComponents3.$refs.form.resetFields();
        this.$emit('success')
      },
      close(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$refs.vformComponents2.$refs.form.resetFields();
        this.$refs.vformComponents3.$refs.form.resetFields();
        this.$emit('close')
      },
      getData(){

        this.typeOptions = []
        this.$commonJs.filterDataDict("publicAppealType",this.typeOptions )


        this.statusOptions = []
        this.$commonJs.filterDataDict("publicAppealStatus",this.statusOptions )

        this.bclassifyOptions = [];
        this.$commonJs.filterDataDict("hazardBClassify", this.bclassifyOptions);

        this.classNameOptions = []
        //this.$commonJs.filterDataDict("publicAppealClassName",this.classNameOptions )

        this.starOptions = []
        this.$commonJs.filterDataDict("publicFollowStar",this.starOptions )
        this.formData3.options.forEach(t=>{
          if(t.key=='followStar'){
            t.option.data = this.starOptions
          }
        })

        if(this.openType!="add"){
          publicAppealDetail(this.id).then(res=>{
            if(res.code==200){

              this.formData.form = res.data
              this.formData2.form.processMsg = res.data.processMsg
              this.formData2.form.processUrl = res.data.processUrl
              if(res.data.follow==null){
                this.formData3.form.follow={}
                this.formData3.form.follow.appealId = this.formData.form.id
              }else{
                this.formData3.form.follow = res.data.follow
                this.$set(this.formData3.form,"followContent",res.data.follow.content );
                this.$set(this.formData3.form,"followName",res.data.follow.name );
                this.$set(this.formData3.form,"followStar",res.data.follow.star )
                this.$set(this.formData3.form,"followTime",res.data.follow.followTime )
              }
              this.loadFormat()

              this.formData.form.areaCode = [res.data.provinceCode,res.data.cityCode,res.data.countyCode]
              this.sendBclassifyData();

            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }
      }
    },
  };
</script>

<style lang="scss" scoped>

</style>
